<template>
    <el-card shadow="never" class="border-0">
        <!-- 项目详情 -->
        <el-collapse v-model="projectActiveNames">
            <el-collapse-item title="项目详情" name="1">
                <el-form :model="form_project" ref="formRef_project" :rules="rules_project" label-width="80px"
                    :inline="false">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="项目名称" prop="projectName">
                                <el-input :disabled="!form_project_edit_flag" v-model="form_project.projectName"
                                    placeholder="项目名称" maxlength="30" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <!-- prop="customerId" -->
                            <el-form-item label="客户公司">
                                <el-button :disabled="!form_project_edit_flag" @click="setSelectCompanyId('project')">{{
                                    checkedCustomer_project?.name }}</el-button>
                                <!-- <el-button v-if="null != checkedCustomer_project && null != checkedCustomer_project.id" :disabled="!form_project_edit_flag" type="primary" text size="small" @click="cleanSelectedCompany()">清空已选</el-button> -->
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="开始时间" prop="startTime">
                                <el-date-picker :disabled="!form_project_edit_flag" v-model="form_project.startTime"
                                    type="date" placeholder="暂无" format="YYYY-MM-DD" value-format="YYYY-MM-DD">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="结束时间" prop="endTime">
                                <el-date-picker :disabled="!form_project_edit_flag" v-model="form_project.endTime"
                                    type="date" placeholder="暂无" format="YYYY-MM-DD" value-format="YYYY-MM-DD">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="项目编号">
                                <el-input :disabled="!form_project_edit_flag" v-model="form_project.projectNo"
                                    placeholder="暂无" maxlength="20" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="项目类型">
                                <el-select :disabled="!form_project_edit_flag" v-model="form_project.projectStatus"
                                    placeholder="暂无" clearable>
                                    <el-option v-for="item in projectStatuses" :key="item.code"
                                        :label="item.description" :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <el-row>
                    <el-switch v-model="form_project_edit_flag" size="small" active-text="编辑" inactive-text="只读" />
                    <el-button class="mx-2" type="primary" size="small" :disabled="!form_project_edit_flag"
                        @click="updateProject">修改项目</el-button>
                    <!-- <el-popconfirm title="是否要删除该项目？" confirmButtonText="确认" cancelButtonText="取消"
                        @confirm="handleDelete_project">
                        <template #reference>
                            <el-button size="small" type="primary" :disabled="!form_project_edit_flag">删除</el-button>
                        </template>
</el-popconfirm> -->
                </el-row>
            </el-collapse-item>
        </el-collapse>

        <!-- 分割线 -->
        <!-- <el-divider /> -->
        <br />

        <!-- 搜索 -->
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
                <el-col :span="5" :offset="0">
                    <el-form-item label="工单号">
                        <el-input v-model="searchForm.orderNo" placeholder="工单号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="0">
                    <el-form-item label="工单名称">
                        <el-input v-model="searchForm.orderName" placeholder="工单名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="工单状态">
                        <el-select v-model="searchForm.orderStatus" placeholder="工单状态">
                            <el-option v-for="item in orderStatusList" :key="item.code" :label="item.description"
                                :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData">搜索</el-button>
                        <el-button @click="resetSearchForm">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <!-- 新增|刷新 -->
        <div class="flex items-center justify-between mb-4">
            <el-button type="primary" size="small" @click="handleCreate">新增</el-button>
            <el-tooltip effect="dark" content="刷新数据" placement="top">
                <el-button text @click="getData">
                    <el-icon :size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-tooltip>
        </div>

        <!-- 工单table -->
        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
            <el-table-column label="工单号" align="center" prop="orderNo"></el-table-column>
            <el-table-column label="工单名称" align="center" prop="orderName"></el-table-column>
            <el-table-column label="工单类型" align="center">
                <template #default="{ row }">
                    {{ formatOrderType(row.orderType) }}
                </template>
            </el-table-column>

            <el-table-column label="工单发布人" align="center">
                <template #default="{ row }">
                    {{ row.createUserName }}
                </template>
            </el-table-column>

            <el-table-column label="工单执行人" align="center">
                <template #default="{ row }">
                    {{ row.engineerNames ? row.engineerNames : "暂无" }}
                </template>
            </el-table-column>

            <!-- <el-table-column label="工单金额" align="center" prop="sum"></el-table-column> -->
            <el-table-column label="工单状态" align="center">
                <template #default="{ row }">
                    {{ formatOrderStatus(row.orderStatus) }}
                </template>
            </el-table-column>
            <el-table-column label="开始时间" align="center">
                <template #default="{ row }">
                    {{ row.startTime ? row.startTime : "暂无" }}
                </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center">
                <template #default="{ row }">
                    {{ row.endTime ? row.endTime : "暂无" }}
                </template> </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <div>
                        <el-button type="primary" text size="small" @click="handleEdit(scope.row)">修改</el-button>
                        <!-- 未指派的状态指派按钮可用，其他场景不可用 -->
                        <!-- <el-button v-if="scope.row.orderStatus < 6" type="primary" text size="small"
                            @click="handleAssign(scope.row)">指派</el-button>
                        <el-button v-else type="primary" text size="small" disabled>指派</el-button> -->

                        <!-- 未指派的状态指派按钮可用，其他场景不可用 -->
                        <!-- 工单状态（1:未派发, 2:已派发,3工程师已接单，4工程师已出发，5:已开始,6施工已结束，7:已回款, 8:工单已完结） -->
                        <el-button v-if="scope.row.orderStatus < 6" type="primary" text size="small"
                            @click="showPublishWin(scope.row)">发布</el-button>
                        <el-button v-else type="primary" text size="small" disabled>发布</el-button>

                        <el-button type="primary" text size="small" @click="handleOrderLog(scope.row)">日志</el-button>


                        <el-popconfirm title="是否要确认回款？" confirmButtonText="确认" cancelButtonText="取消"
                            @confirm="handleOrderPayment(scope.row.orderId)">
                            <template #reference>
                                <!-- 施工已结束的工单才可以进行回款确认 -->
                                <el-button
                                    v-if="scope.row.orderStatus == 6 || (scope.row.orderType == 3 && scope.row.orderStatus == 1)"
                                    type="primary" text size="small">回款</el-button>
                                <el-button v-else type="primary" text size="small" disabled>回款</el-button>
                            </template>
                        </el-popconfirm>

                        <el-popconfirm title="是否要确认结单？" confirmButtonText="确认" cancelButtonText="取消"
                            @confirm="handleOrderOver(scope.row.orderId)">
                            <template #reference>
                                <!-- 已回款的工单才可以进行结束工单 -->
                                <el-button
                                    v-if="scope.row.orderStatus == 7 || (scope.row.orderType == 3 && scope.row.orderStatus == 7)"
                                    type="primary" text size="small">结单</el-button>
                                <el-button v-else type="primary" text size="small" disabled>结单</el-button>
                            </template>
                        </el-popconfirm>

                        <!-- 已完结状态的工单才可以进行评分 -->
                        <el-button v-if="scope.row.orderStatus == 8" type="primary" text size="small"
                            @click="handleScore(scope.row)">内部评分</el-button>
                        <el-button v-else type="primary" text size="small" @click="handleScore(scope.row)"
                            disabled>内部评分</el-button>

                        <el-button type="primary" text size="small" @click="customerScore(scope.row)">客户评分</el-button>

                        <el-button type="primary" text size="small" @click="showFilesEn(scope.row)">施工档案</el-button>

                        <el-button type="primary" text size="small" @click="showFiles(scope.row)">附件</el-button>

                        <el-popconfirm title="是否要删除该工单？" confirmButtonText="确认" cancelButtonText="取消"
                            @confirm="handleDelete(scope.row.orderId)">
                            <template #reference>
                                <!-- 未指派的状态删除按钮可用，其他场景不可用 -->
                                <el-button v-if="scope.row.orderStatus == 1" text type="primary"
                                    size="small">删除</el-button>
                                <el-button v-else text type="primary" size="small" disabled>删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 工单table分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>

        <!-- 新增工单 -->
        <FormDrawer ref="formDrawerRef" size="60%" :title="drawerTitle" @submit="handleSubmit">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="90px" :inline="false">
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="基础信息" name="1">

                        <!-- <el-divider class="line" content-position="left">基础信息</el-divider> -->

                        <!-- 必填项 -->
                        <el-row>
                            <el-col :span="10">
                                <el-form-item label="工单名称" prop="orderName">
                                    <el-input v-model="form.orderName" placeholder="船名-设备名" @change="addTimestamp"
                                        maxlength="50" show-word-limit></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="工单类型" prop="orderType">
                                    <el-select v-model="form.orderType" filterable placeholder="工单类型">
                                        <el-option v-for="item in orderTypes" :key="item.code" :label="item.description"
                                            :value="item.code" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <!-- 非必填项 -->
                        <!-- <el-form-item label="船名/船号" prop="vessleName">
                        <el-input v-model="form.vessleName" placeholder="船名/船号"></el-input>
                        </el-form-item>
                        <el-form-item label="服务要求" prop="serviceRequest">
                            <el-input v-model="form.serviceRequest" placeholder="服务要求"></el-input>
                        </el-form-item> -->

                        <el-row>
                            <el-col :span="10">
                                <el-form-item label="开始时间" prop="startTime">
                                    <el-date-picker v-model="form.startTime" type="date" placeholder="开始时间"
                                        @change="orderStartOrEndTimeChange" format="YYYY-MM-DD"
                                        value-format="YYYY-MM-DD">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="结束时间" prop="endTime">
                                    <el-date-picker v-model="form.endTime" type="date" placeholder="结束时间"
                                        @change="orderStartOrEndTimeChange" format="YYYY-MM-DD"
                                        value-format="YYYY-MM-DD">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="10">
                                <el-form-item label="工单金额">
                                    <el-input-number v-model="form.sum" placeholder="工单金额" :min=0></el-input-number>
                                    <span class="px-2">元</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <!-- <el-form-item label="持续天数">
                                    <el-input-number v-model="form.continuous" placeholder="持续天数"
                                        :min=0></el-input-number>
                                    <span class="px-2">天</span>
                                </el-form-item> -->
                                <el-col :span="10">
                                    <el-form-item label="位置信息" prop="formattedAddress">
                                        <el-button @click="clickSetLocationBtn">
                                            {{ form.formattedAddress == null ? '点击获取位置' : form.formattedAddress }}
                                        </el-button>
                                    </el-form-item>
                                </el-col>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="10">
                                <el-form-item label="服务地址">
                                    <el-input v-model="form.serviceAddress" type="textarea" :rows="2" placeholder="服务地址"
                                        maxlength="200" show-word-limit></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <!-- <el-form-item label="工单描述" prop="orderDescription">
                                    <el-input v-model="form.orderDescription" type="textarea" :rows="2"
                                        placeholder="工单描述" maxlength="50" show-word-limit></el-input>
                                </el-form-item> -->
                                <el-form-item label="服务要求">
                                    <el-input v-model="form.serviceRequest" type="textarea" :rows="2" placeholder="服务要求"
                                        maxlength="200" show-word-limit></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <!-- <el-row>
                            <el-col :span="10">
                                <el-form-item label="服务要求">
                                    <el-input v-model="form.serviceRequest" type="textarea" :rows="2"
                                        placeholder="服务要求" maxlength="50" show-word-limit></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row> -->

                        <el-row>
                            <el-col :span="20">
                                <el-form-item label="联系方式">
                                    <el-checkbox v-model="contacType1"
                                        @change="handleCheckboxChange('shipowner')">船东</el-checkbox>
                                    <el-checkbox v-model="contacType2"
                                        @change="handleCheckboxChange('shipyard')">船厂</el-checkbox>
                                    <el-checkbox v-model="contacType3"
                                        @change="handleCheckboxChange('agent')">代理</el-checkbox>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row v-if="contacType1">
                            <el-col :span="20">
                                <div v-for="(contact, index) in contacts.shipowner" :key="index">
                                    <el-form-item label="船东:">
                                        <el-input placeholder="联系人" v-model="contact.name"
                                            class="inputStyle"></el-input>
                                        <el-input placeholder="联系方式" v-model="contact.info"
                                            class="inputStyle"></el-input>
                                        <el-button @click="addContact('shipowner')" class="iconStyle" link><el-icon>
                                                <CirclePlus />
                                            </el-icon></el-button>
                                        <el-button @click="removeContact('shipowner', index)" class="iconStyle"
                                            link><el-icon>
                                                <Remove />
                                            </el-icon></el-button>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row v-if="contacType2">
                            <el-col :span="20">
                                <div v-for="(contact, index) in contacts.shipyard" :key="index">
                                    <el-form-item label="船厂:">
                                        <el-input placeholder="联系人" v-model="contact.name"
                                            class="inputStyle"></el-input>
                                        <el-input placeholder="联系方式" v-model="contact.info"
                                            class="inputStyle"></el-input>
                                        <el-button @click="addContact('shipyard')" class="iconStyle" link><el-icon>
                                                <CirclePlus />
                                            </el-icon></el-button>
                                        <el-button @click="removeContact('shipyard', index)" class="iconStyle"
                                            link><el-icon>
                                                <Remove />
                                            </el-icon></el-button>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row v-if="contacType3">
                            <el-col :span="20">
                                <div v-for="(contact, index) in contacts.agent" :key="index">
                                    <el-form-item label="代理:">
                                        <el-input placeholder="联系人" v-model="contact.name"
                                            class="inputStyle"></el-input>
                                        <el-input placeholder="联系方式" v-model="contact.info"
                                            class="inputStyle"></el-input>
                                        <el-button @click="addContact('agent')" class="iconStyle" link><el-icon>
                                                <CirclePlus />
                                            </el-icon></el-button>
                                        <el-button @click="removeContact('agent', index)" class="iconStyle"
                                            link><el-icon>
                                                <Remove />
                                            </el-icon></el-button>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>

                    </el-collapse-item>

                    <el-collapse-item title="船舶信息" name="2">
                        <!-- <el-divider content-position="left">船舶信息</el-divider> -->

                        <!-- 新增|刷新 -->
                        <div class="flex mb-4" style="justify-content: flex-end">
                            <el-button type="primary" size="small" text @click="showAddShipWin()">新增船舶</el-button>
                            <el-button type="primary" size="small" text @click="selectShip()">选择船舶</el-button>
                        </div>

                        <!-- 表格数据 -->
                        <el-table :data="tableDataShip" style="width: 100%">

                            <el-table-column label="船舶名称" align="center" show-overflow-tooltip>
                                <template #default="{ row }">
                                    {{ row.name }}
                                </template>
                            </el-table-column>

                            <el-table-column label="IMO" align="center">
                                <template #default="{ row }">
                                    {{ row.imo }}
                                </template>
                            </el-table-column>

                            <el-table-column label="MMSI" align="center">
                                <template #default="{ row }">
                                    {{ row.mmsi }}
                                </template>
                            </el-table-column>

                            <el-table-column label="船东公司" align="center" show-overflow-tooltip>
                                <template #default="{ row }">
                                    {{ row.shipownerCompany }}
                                </template>
                            </el-table-column>

                            <el-table-column label="船管公司" align="center" show-overflow-tooltip>
                                <template #default="{ row }">
                                    {{ row.shipmanagementCompany }}
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" align="center">
                                <template #default="scope">
                                    <el-popconfirm title="是否要移除该船舶信息？" confirmButtonText="确认" cancelButtonText="取消"
                                        @confirm="deleteShip(scope.row.id)">
                                        <template #reference>
                                            <el-button text type="primary" size="small">删除</el-button>
                                        </template>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-collapse-item>

                    <el-collapse-item title="设备信息" name="3">
                        <!-- <el-divider content-position="left">设备信息</el-divider> -->

                        <!-- 新增|刷新 -->
                        <div class="flex mb-4" style="justify-content: flex-end">
                            <el-button type="primary" size="small" text @click="showAddDeviceWin()">新增设备</el-button>
                            <el-button type="primary" size="small" text @click="selectDevice()">选择设备</el-button>
                        </div>

                        <!-- 表格数据 -->
                        <el-table :data=tableDataProduct style="width: 100%">

                            <el-table-column label="产品型号" align="center">
                                <template #default="{ row }">
                                    {{ row.productTypeCode }}
                                </template>
                            </el-table-column>

                            <el-table-column label="产品序列号" align="center">
                                <template #default="{ row }">
                                    {{ row.productSn }}
                                </template>
                            </el-table-column>
                            <el-table-column label="整机号" align="center">
                                <template #default="{ row }">
                                    {{ row.oeSerialNo }}
                                </template>
                            </el-table-column>
                            <el-table-column label="发货日期" align="center">
                                <template #default="{ row }">
                                    {{ row.deliveryDate }}
                                </template>
                            </el-table-column>
                            <el-table-column label="产品状态" align="center">
                                <template #default="{ row }">
                                    {{ transferProductStatus(row.productStatus) }}
                                </template>
                            </el-table-column>

                            <el-table-column label="终端客户" align="center">
                                <template #default="{ row }">
                                    {{ row.supplierName }}
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" width="240" align="center">
                                <template #default="scope">
                                    <el-popconfirm title="是否要移除该设备信息？" confirmButtonText="确认" cancelButtonText="取消"
                                        @confirm="deleteDevice(scope.row.productId)">
                                        <template #reference>
                                            <el-button text type="primary" size="small">删除</el-button>
                                        </template>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>

                    </el-collapse-item>

                    <!-- <el-collapse-item title="发布方式" name="4">
                        <el-row>
                            <el-col :span="10">
                                <el-form-item label="发布方式">
                                    <el-select v-model="form.publishType" @change="publishTypeChange" clearable
                                        placeholder="发布方式">
                                        <el-option key="1" label="由指派人选择执行人员" value="1" />
                                        <el-option key="2" label="所有人抢单" value="2" />
                                        <el-option key="3" label="指定人抢单" value="3" />
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="5">
                                <el-form-item>
                                    <el-button
                                        v-if="form.publishType == 1 && assignProps.assignedUserId != null && assignProps.assignedUserId.length > 0"
                                        type="primary" text @click="handleAssign(editId)">已指派</el-button>
                                    <el-button
                                        v-if="form.publishType == 1 && (assignProps.assignedUserId == null || assignProps.assignedUserId.length == 0)"
                                        type="primary" text @click="handleAssign(editId)">指派</el-button>
                                    <el-button v-if="form.publishType == 3" type="primary" text
                                        @click="handleAssign(editId)">抢单</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5" v-if="form.publishType == 1 || form.publishType == 3">
                                <el-icon>
                                    <MapLocation />
                                </el-icon>
                                <el-button type="primary" text @click="handleMapAssign(editId)">查看指派地图</el-button>
                            </el-col>
                        </el-row>
                    </el-collapse-item> -->
                </el-collapse>
            </el-form>
        </FormDrawer>

        <!-- 工单管理员评价 -->
        <FormDrawer ref="formDrawerRef_score" title="内部评分" @submit="handleSubmit_score">
            <el-form-item v-for="item in form_score.labelMarks" :label="item.labelName" label-width="150px"
                label-position="left">
                <el-rate v-if="form_score.isEdit == true" v-model="item.mark" />
                <el-rate v-else v-model="item.mark" disabled />
            </el-form-item>
            <el-form-item label="工单评价" label-width="150px">
                <el-input v-if="form_score.isEdit == true" type="textarea" :rows="4" v-model="form_score.remark"
                    placeholder="工单评价"></el-input>
                <el-input v-else type="textarea" :rows="4" v-model="form_score.remark" placeholder="工单评价"
                    disabled></el-input>
            </el-form-item>
        </FormDrawer>

        <!-- 客户评分 -->
        <FormDrawer showSubBtn="0" ref="formDrawerRef_customerScore" title="客户评分">
            <div class="no-data" v-if="!form_customerScore.labelMarks.length && !form_purchaseScore.labelMarks.length">
                暂无评价数据
            </div>
            <div v-else>
                <el-collapse>
                    <el-collapse-item v-for="(scoreData, scoreType, index) in scoreDataList"
                        :title="scoreType === 'customer' ? '现场人员评价' : '采购人员评价'" :name="index + 1" :key="index">
                        <template v-if="scoreData.labelMarks.length">
                            <el-form-item v-for="item in scoreData.labelMarks" :label="item.labelName"
                                label-width="150px" label-position="left" :key="item.labelName">
                                <el-rate v-model="item.mark" disabled />
                            </el-form-item>
                            <el-form-item label="工单评价">
                                <el-input type="textarea" :rows="4" v-model="scoreData.remark" placeholder="工单评价"
                                    disabled></el-input>
                            </el-form-item>
                        </template>
                        <template v-else>
                            <div class="no-data">{{ scoreType === 'customer' ? '暂无现场人员评价数据' : '暂无采购人员评价数据' }}</div>
                        </template>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </FormDrawer>
    </el-card>


    <!-- 发布工单 -->
    <el-dialog v-model="dialogTableVisible_orderPublish" title="发布工单" width="40%" align-center>
        <el-form :model="publishForm" ref="publishFormRef" :rules="publishFormRules" label-width="90px" :inline="false">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="发布方式" prop="publishType">
                        <!-- 发布方式，1指派，2地图选择，3所有人抢单，4指定人抢单 -->
                        <el-select v-model="publishForm.publishType" @change="publishTypeChange" placeholder="发布方式">
                            <el-option key="1" label="由指派人选择执行人员" value="1" />
                            <el-option key="3" label="所有人抢单" value="3" />
                            <el-option key="4" label="指定人抢单" value="4" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <div class="flex items-center justify-end">
                        <el-button
                            v-if="publishForm.publishType == 1 && assignProps.assignedUserId != null && assignProps.assignedUserId.length > 0"
                            type="primary" text @click="handleAssign(editId)">已指派</el-button>
                        <el-button
                            v-if="publishForm.publishType == 1 && (assignProps.assignedUserId == null || assignProps.assignedUserId.length == 0)"
                            type="primary" text @click="handleAssign(editId)">指派</el-button>
                        <el-button v-if="publishForm.publishType == 4" type="primary" text
                            @click="handleAssign(editId)">选择人员</el-button>
                        <el-button v-if="publishForm.publishType == 1 || publishForm.publishType == 4" type="primary"
                            text @click="handleMapAssign(editId)">查看指派地图</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="default" @click="dialogTableVisible_orderPublish = false">
                    关闭
                </el-button>
                <el-button type="primary" @click="orderPublish()">
                    发布
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 查看工单日志 -->
    <!-- <el-dialog v-model="dialogTableVisible_orderLog" ref="dialogTableVisible_orderLog_ref" title="查看日志" width="70%"
        height="300px" align-center>
        <OrderLog v-if="dialogTableVisible_orderLog" :orderDetail="currOrderLog_orderDetail" />
        <template #footer>
            <div class="dialog-footer">
                <el-button type="default" @click="dialogTableVisible_orderLog = false">
                    关闭
                </el-button>
            </div>
        </template>
    </el-dialog> -->

    <!-- 选取客户dialog -->
    <SystemDialog title="查看日志" :visible="dialogTableVisible_orderLog" :height="50" :width="70" :showOkBtn="false"
        @on-close="dialogTableVisible_orderLog = false" @on-confirm="dialogTableVisible_orderLog = false">
        <template v-slot:content>
            <OrderLog v-if="dialogTableVisible_orderLog" :orderDetail="currOrderLog_orderDetail" />
        </template>
    </SystemDialog>

    <!-- 选取船舶dialog -->
    <!-- <el-dialog v-model="dialogTableVisible_ship" title="选择客户" width="70%" align-center>
        <SelectShip v-if="dialogTableVisible_ship" @getCheckedShip="getCheckedShip" />
        <template #footer>
            <div class="dialog-footer">
                <el-button type="default" @click="dialogTableVisible_ship = false">
                    关闭
                </el-button>
                <el-button type="primary" @click="confirmCheckedShip()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog> -->

    <!-- 选取船舶dialog -->
    <SystemDialog title="选择船舶" :visible="dialogTableVisible_ship" :height="60" :width="70"
        @on-close="dialogTableVisible_ship = false" @on-confirm="confirmCheckedShip">
        <template v-slot:content>
            <SelectShip v-if="dialogTableVisible_ship" @getCheckedShip="getCheckedShip" />
        </template>
    </SystemDialog>


    <!-- 选取设备dialog -->
    <SystemDialog title="选择设备" :visible="dialogTableVisible_device" :height="60" :width="70"
        @on-close="dialogTableVisible_device = false" @on-confirm="confirmCheckedDevice">
        <template v-slot:content>
            <SelectDevice v-if="dialogTableVisible_device" @getCheckedDevice="getCheckedDevice" />
        </template>
    </SystemDialog>


    <!-- 新增|修改弹窗 -->
    <FormDrawer ref="shipFormDrawerRef" title="新增船舶" @submit="shipHandleSubmit">
        <el-form :model="shipForm" ref="shipFormRef" :rules="shipRules" label-width="80px" :inline="false">
            <el-form-item label="船舶名称" prop="name">
                <el-input v-model="shipForm.name" placeholder="船舶名称"></el-input>
            </el-form-item>
            <el-form-item label="IMO">
                <el-input v-model="shipForm.imo" placeholder="IMO"></el-input>
            </el-form-item>
            <el-form-item label="MMSI">
                <el-input v-model="shipForm.mmsi" placeholder="MMSI"></el-input>
            </el-form-item>
            <el-form-item label="船籍国">
                <el-input v-model="shipForm.flagCountry" placeholder="船籍国"></el-input>
            </el-form-item>
            <el-form-item label="船级社">
                <el-input v-model="shipForm.classificationSociety" placeholder="船级社"></el-input>
            </el-form-item>
            <el-form-item label="船东公司">
                <el-input v-model="shipForm.shipownerCompany" placeholder="船东公司"></el-input>
            </el-form-item>
            <el-form-item label="船管公司">
                <el-input v-model="shipForm.shipmanagementCompany" placeholder="船管公司"></el-input>
            </el-form-item>
        </el-form>
    </FormDrawer>

    <!-- 新增|修改弹窗 -->
    <FormDrawer ref="deviceFormDrawerRef" title="新增设备" @submit="deviceHandleSubmit">
        <el-form :model="deviceForm" ref="deviceFormRef" :rules="deviceRules" label-width="120px" :inline="false">
            <el-form-item label="生产厂家" prop="factory">
                <el-select v-model="deviceForm.factory" placeholder="请选择生产厂家">
                    <el-option v-for="item in factoryTypes" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品型号" prop="productTypeCode">
                <el-input v-model="deviceForm.productTypeCode" placeholder="产品型号"></el-input>
            </el-form-item>
            <el-form-item label="产品序列号" prop="productSn" v-if="deviceForm.factory == 'HLD'">
                <el-input v-model="deviceForm.productSn" placeholder="产品序列号"></el-input>
            </el-form-item>
            <el-form-item label="整机序列号" prop="oeSerialNo"
                v-if="deviceForm.factory == 'WG' || deviceForm.factory == 'OEM'">
                <el-input v-model="deviceForm.oeSerialNo" placeholder="整机序列号"></el-input>
            </el-form-item>
            <el-form-item label="软件版本" prop="softwareVersion">
                <el-input v-model="deviceForm.softwareVersion" placeholder="软件版本"></el-input>
            </el-form-item>
            <el-form-item label="买方">
                <el-button @click="dialogTableVisible_device_company = true">
                    {{ deviceCheckedCompany == null ? '选择买方' : deviceCheckedCompany.name }}
                </el-button>
            </el-form-item>
            <el-form-item label="终端客户">
                <el-button @click="dialogTableVisible_device_supplier = true">
                    {{ deviceCheckedSupplier == null ? '选择终端客户' : deviceCheckedSupplier.name }}
                </el-button>
            </el-form-item>
            <el-form-item label="发货日期">
                <el-date-picker v-model="deviceForm.deliveryDate" type="datetime" placeholder="选择日期"
                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="完工日期">
                <el-date-picker v-model="deviceForm.completionDate" type="datetime" placeholder="选择日期"
                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="交船日期">
                <el-date-picker v-model="deviceForm.shipDeliveryDate" type="datetime" placeholder="选择日期"
                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="质保截至日期">
                <el-date-picker v-model="deviceForm.warrantyEndDate" type="datetime" placeholder="选择日期"
                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="质保条款">
                <el-input type="textarea" :rows="2" v-model="deviceForm.warrantyTerms" placeholder="质保条款"></el-input>
            </el-form-item>
        </el-form>
    </FormDrawer>

    <!-- 选取客户dialog -->
    <!-- <el-dialog v-model="dialogTableVisible_customer" title="选择客户" width="70%" align-center>
        <SelectCompany :showSelection="true" :selectedCompanyId="selectCompanyConfig.id"
            @getCheckedCompany="getCheckedCompany" />
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="dialogTableVisible_customer = false">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog> -->

    <!-- 选取客户dialog -->
    <SystemDialog title="选择客户" :visible="dialogTableVisible_customer" :height="60" :width="70"
        @on-close="dialogTableVisible_customer = false" @on-confirm="dialogTableVisible_customer = false">
        <template v-slot:content>
            <SelectCompany v-if="dialogTableVisible_customer" :showSelection="true"
                :selectedCompanyId="selectCompanyConfig.id" @getCheckedCompany="getCheckedCompany" />
        </template>
    </SystemDialog>

    <!-- 选取供货商dialog -->
    <SystemDialog title="选择买方" :visible="dialogTableVisible_device_company" :height="60" :width="70"
        @on-close="dialogTableVisible_device_company = false" @on-confirm="dialogTableVisible_device_company = false">
        <template v-slot:content>
            <SelectCompany v-if="dialogTableVisible_device_company" :showSelection="true"
                @getCheckedCompany="getCheckedCompanyForDevice" />
        </template>
    </SystemDialog>
    <SystemDialog title="选择终端客户" :visible="dialogTableVisible_device_supplier" :height="60" :width="70"
        @on-close="dialogTableVisible_device_supplier = false" @on-confirm="dialogTableVisible_device_supplier = false">
        <template v-slot:content>
            <SelectCompany v-if="dialogTableVisible_device_supplier" :showSelection="true"
                @getCheckedCompany="getCheckedSupplierForDevice" />
        </template>
    </SystemDialog>

    <!-- 选取位置dialog -->
    <SystemDialog title="选取地点坐标" :visible="setLocationDialogVisible" :height="50" :width="60" @on-close="closeAddress"
        @on-confirm="commitAddress">
        <template v-slot:content>
            <GaoDeMap v-if="setLocationDialogVisible" :addressClick="addressClick" ref="mapRef" @address="getAddress">
            </GaoDeMap>
        </template>
    </SystemDialog>

    <!-- 选取工程师dialog -->
    <SystemDialog title="选择工程师" :visible="asignEngineerDialogVisible" :height="50" :width="60"
        @on-close="closeAssignEngineer" @on-confirm="commitAssignEngineer">
        <template v-slot:content>
            <SelectEngineer v-if="asignEngineerDialogVisible" @getCheckedEngineer="getCheckedEngineer"
                :assignProps="assignProps.assignedUserId"></SelectEngineer>
        </template>
    </SystemDialog>

    <!-- 选取工程师Map dialog -->
    <SystemDialog title="选择工程师" :visible="asignEngineerMapDialogVisible" :height="50" :width="60"
        @on-close="closeAssignMapEngineer" @on-confirm="commitAssignMapEngineer">
        <template v-slot:content>
            <SelectEngineerMap v-if="asignEngineerMapDialogVisible" @getCheckedMapEngineer="getCheckedMapEngineer"
                :assignMapProps="assignProps"></SelectEngineerMap>
        </template>
    </SystemDialog>

    <!-- 附件弹窗 -->
    <el-dialog v-model="dialogTableVisible_orderFiles" :title="dialogTable_orderFiles_title" width="700" align-center>
        <OrderFiles v-if="dialogTableVisible_orderFiles" :orderId="currOrderFiles_orderId"
            :fileType="dialogTable_orderFiles_type" />
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="dialogTableVisible_orderFiles = false">
                    关闭
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from "vue"
import FormDrawer from "~/components/FormDrawer.vue";
import SelectCompany from "~/components/select-company.vue";
import SelectEngineer from "~/components/select-engineer.vue";
import SelectEngineerMap from "~/components/select-engineer-map.vue";
import {
    api_orders_add, api_orders_detail, api_orders_getScore, api_orders_list,
    api_orders_postScore, api_orders_scoreLabels, api_orders_update, api_project_constant,
    api_orders_delete, api_orders_getCustomerScore, api_orders_dispatch
} from "~/api/ordersApi"
import { toast, toastWarn } from "~/composables/util"
import { getDaysBetweenDates, delRepeatJson } from '~/utils/common.js'
import { api_project_delete, api_project_detail, api_project_update } from "~/api/projectApi";
import GaoDeMap from "~/components/GaoDeMap.vue";
import SystemDialog from "~/components/SystemDialog.vue";
import OrderLog from "~/components/order-log.vue";
import OrderFiles from "~/components/order-files.vue";
import { useStore } from 'vuex'
import SelectShip from "~/components/select-ship.vue";
import SelectDevice from "~/components/select-device.vue";
import { addShip } from "~/api/supply"
import { addProductAndType, getProductTypeList } from "~/api/productApi"
import { checkOrdName } from '~/utils/validate.js'

//store存储
const store = useStore()
//界面传参：项目ID
const projectId = ref(null)

//页面常量---------------
const projectStatuses = ref([])
const orderStatusList = ref([])
const orderTypes = ref([])
//页面常量---------------


//项目表单---------------
const projectActiveNames = ref(['1'])
const dialogTableVisible_customer = ref(false)
const selectCompanyConfig = ref({
    id: null,
    type: 'project' // 当前谁在用这个弹出框 project, order
})
const checkedCustomer_project = ref({ "id": null, "name": "选择客户" })
const form_project_edit_flag = ref(false) // 当前是否是编辑模式
const formRef_project = ref(null)
const form_project = reactive({
    projectId: null,
    customerId: null,
    projectName: "",
    projectNo: "",
    projectStatus: null,
    startTime: null,
    endTime: null
})
const rules_project = {
    projectName: [
        { required: true, message: '项目名称不能为空', trigger: 'change' }
    ],
    customerId: [
        { required: true, message: '客户公司不能为空', trigger: 'change' }
    ],
    formattedAddress: [
        { required: true, message: '位置信息不能为空', trigger: 'change' }
    ]
}
//项目表单---------------

//工单表单---------------
//默认打开基础信息折叠
const activeNames = ref(['1', '4'])
const editId = ref(0)
const drawerTitle = computed(() => editId.value ? "修改" : "新增")
const tableData = ref([])
const loading = ref(false)
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const formRef = ref(null)
const searchForm = reactive({
    orderNo: "",
    orderName: "",
    projectId: projectId.value,
    customerId: "",
    orderStatus: null,
    customerRating: null,
    page: currentPage.value,
    size: limit.value,
    startTime: '',
    endTime: '',
})
const resetSearchForm = () => {
    searchForm.orderNo = ""
    searchForm.orderName = ""
    searchForm.projectId = ""
    searchForm.customerId = ""
    searchForm.orderStatus = null
    searchForm.customerRating = null
    getData()
}
//联系方式
const contacType1 = ref(false)
const contacType2 = ref(false)
const contacType3 = ref(false)
// const contacTypeData1 = reactive({
//     contacPerson: null,
//     contacPhone: null
// })
// const contacTypeData2 = reactive({
//     contacPerson: null,
//     contacPhone: null
// })
// const contacTypeData3 = reactive({
//     contacPerson: null,
//     contacPhone: null
// })
const contacts = reactive({
    shipowner: [],
    shipyard: [],
    agent: []
})

const form = reactive({
    projectId: projectId.value,
    orderId: null,
    orderName: "",
    orderType: null,
    //工单客户信息与项目一致
    //customerId: checkedCustomer_project.value == null ? "" : checkedCustomer_project.value.id,
    //用于位置校验
    formattedAddress: null,
    locationCreateDto: {
        latitude: null,
        longitude: null,
        locationType: "1",
        formattedAddress: "",
        adcode: "",
        country: "",
        province: "",
        city: "",
        district: "",
        township: ""
    },
    //工单持续时间
    continuous: 0,
    //工单金额
    sum: 0,
    //工单描述
    orderDescription: "",
    //开始时间
    startTime: null,
    //结束时间
    endTime: null,
    //服务地址
    serviceAddress: null,
    //联系方式
    //contactInfo: null,
    //船东
    shipownerName: null,
    shipownerContact: null,
    //船厂
    shipyardName: null,
    shipyardContact: null,
    //代理
    agentName: null,
    agentContact: null,
    //船舶信息
    shipIds: null,
    //设备信息
    devices: null,
    //服务要求
    serviceRequest: null
    //vessleName: null
})
const rules = {
    orderName: [
        { validator: checkOrdName, required: true, trigger: 'blur' }
    ],
    orderType: [
        { required: true, message: '工单类型不能为空', trigger: 'change' }
    ],
    formattedAddress: [
        { required: true, message: '位置信息不能为空', trigger: 'change' }
    ]
}
const address = ref("点击设置位置");
const setLocationDialogVisible = ref(false)
// 指派工单弹窗
const asignEngineerDialogVisible = ref(false)
// 已选工程师列表
const assignProps = reactive({
    assignedUserId: null,
    orderLocationDto: null
})

// 指派工单弹窗 map
const asignEngineerMapDialogVisible = ref(false)
// 已选工程师列表 map
// const assignMapProps = reactive({
//     assignedUserId:null,
//     orderLocationDto:null
// })
//工单表单---------------

//发布工单表单---------------
const publishFormRef = ref(null)

const publishForm = reactive({
    orderId: null,
    //用于位置校验
    formattedAddress: null,
    locationCreateDto: {
        latitude: null,
        longitude: null,
        locationType: "1",
        formattedAddress: "",
        adcode: "",
        country: "",
        province: "",
        city: "",
        district: "",
        township: ""
    },
    //发布方式
    publishType: null,
    //选择的工程师ids
    engineerIds: null
})
const publishFormRules = {
    publishType: [
        { required: true, message: '发布方式不能为空', trigger: 'change' }
    ]
}
//联系人多选框，点击加减添加或者删除多个联系人
function handleCheckboxChange(value) {
    contacts[value] = [];
    if (value === 'shipowner' && contacType1 && contacts.shipowner.length === 0) {
        // 初始化第一个联系人
        contacts.shipowner.push({ name: '', info: '' });
    }
    else if (value === 'shipyard' && contacType2 && contacts.shipyard.length === 0) {
        contacts.shipyard.push({ name: '', info: '' });
    } else if (value === 'agent' && contacType3 && contacts.agent.length === 0) {
        contacts.agent.push({ name: '', info: '' });
    }
}

function addContact(value) {
    contacts[value].push({
        name: null,
        info: null
    })
}

function removeContact(value, index) {
    contacts[value].splice(index, 1);
    if (value === 'shipowner' && contacts.shipowner.length === 0) {
        contacType1.value = false
    } else if (value === 'shipyard' && contacts.shipyard.length === 0) {
        contacType2.value = false
    } else if (value === 'agent' && contacts.agent.length === 0) {
        contacType3.value = false
    }
}
//发布工单表单---------------

// 客户评分------------
const formDrawerRef = ref(null)
const formDrawerRef_customerScore = ref(null)
const form_customerScore = reactive({
    orderId: null,
    remark: "",
    labelMarks: []
})
const form_purchaseScore = reactive({
    orderId: null,
    remark: "",
    labelMarks: []
})
const scoreDataList = computed(() => ({
    customer: form_customerScore,
    purchase: form_purchaseScore
}))
//客户评分------------

//工单管理员评价---------------
const formDrawerRef_score = ref(null)
const form_score = reactive({
    //是否可编辑
    isEdit: false,
    orderId: null,
    mark: 1,
    remark: "",
    labelMarks: []
})
//工单管理员评价---------------

//工单发布---------------
const dialogTableVisible_orderPublish = ref(false)
//工单发布---------------

//工单日志---------------
const checkedCustomer = ref(null)
const dialogTableVisible_orderLog_ref = ref(null)
const dialogTableVisible_orderLog = ref(false)
const currOrderLog_orderDetail = ref(null)
//工单日志---------------


//选择船舶---------------
const tableDataShip = ref(null)
const dialogTableVisible_ship = ref(false)
const dialogTableVisible_selectShipCheckList = ref(null)
const shipFormDrawerRef = ref(null)
const shipFormRef = ref(null)
const shipForm = reactive({
    name: null,
    imo: null,
    mmsi: null,
    flagCountry: null,
    classificationSociety: null,
    shipownerCompany: null,
    shipmanagementCompany: null
})
//选择船舶---------------

//选择设备---------------
//设备类型字典数据
const deviceTypeDic = ref([])

// 产品状态字典数据 0保内 1保外 
const deviceStatusDic = ref([{ "key": 0, "value": "保内" }, { "key": 1, "value": "保外" }])
//供货商
const dialogTableVisible_device_company = ref(false)
const dialogTableVisible_device_supplier = ref(false)
const deviceCheckedCompany = ref(null)
const deviceCheckedSupplier = ref(null)
const tableDataProduct = ref(null)
const dialogTableVisible_device = ref(false)
const dialogTableVisible_selectDeviceCheckList = ref(null)
const deviceFormDrawerRef = ref(null)
const deviceFormRef = ref(null)
const deviceForm = reactive({
    factory: null,
    productTypeCode: null,
    productSn: null,
    oeSerialNo: null,
    softwareVersion: null,
    customerId: null,
    supplierId: null,
    //质保条款
    warrantyTerms: null,
    //发货日期
    deliveryDate: null,
    //完工日期
    completionDate: null,
    //交船日期
    shipDeliveryDate: null,
    //质保截至日期
    warrantyEndDate: null
})
//选择设备---------------

//工单附件---------------
const dialogTable_orderFiles_title = ref(null)
const dialogTable_orderFiles_type = ref(null)
const dialogTableVisible_orderFiles = ref(false)
const currOrderFiles_orderId = ref(null)
//工单附件---------------

// 数据回显相关方法----------------
// 设置选择公司id
const setSelectCompanyId = async (type) => {
    let id = null;
    if (type == 'project') {
        if (!form_project_edit_flag.value) {
            toastWarn('当前项目只读')
            return
        }
        id = form_project.customerId
    } else if (type == 'order') {
        id = form.customerId
    } else {
        return
    }
    console.log('curr company id :', id)
    selectCompanyConfig.value = { id, type }
    dialogTableVisible_customer.value = true
}

//清空已选客户信息
const cleanSelectedCompany = () => {
    checkedCustomer_project.value = { "id": null, "name": "选择客户" }
    form_project.customerId = null
}

// 提交地图地址
const commitAddress = () => {
    // 提交地图地址
    // 关闭地图
    setLocationDialogVisible.value = false;
}

// 关闭地图
const closeAddress = () => {
    address.value = "";
    // 关闭地图
    setLocationDialogVisible.value = false;
}

// 点击设置位置信息btn
function clickSetLocationBtn() {
    setLocationDialogVisible.value = true;
}

// 获取选取位置
const getAddress = (data) => {
    if (data != "") {
        address.value = data;
        form.formattedAddress = data;
    }
}

// 地图选位置
function addressClick(item, lng, lat) {
    address.value = `${item.regeocode.formattedAddress}`;
    form.formattedAddress = `${item.regeocode.formattedAddress}`;
    form.locationCreateDto = {
        latitude: lat,
        longitude: lng,
        locationType: "1",
        formattedAddress: item.regeocode.formattedAddress,
        adcode: item.regeocode.addressComponent.adcode,
        country: item.regeocode.addressComponent.country,
        province: item.regeocode.addressComponent.province,
        city: item.regeocode.addressComponent.city,
        district: item.regeocode.addressComponent.district || item.regeocode.addressComponent.province,
        district: item.regeocode.addressComponent.township,
    }
    //回显到服务地址字段
    form.serviceAddress = form.formattedAddress
}
// 数据回显相关方法----------------


// 生命周期函数
onMounted(() => {

    if (null == store.state.projectId) {
        toastWarn("项目ID不能为空")
        return
    }
    //赋值
    projectId.value = store.state.projectId
    //console.log('projectId---------------->', projectId.value)

    // 获取界面所需常量
    getProjectConstant()

    // 获取工单列表
    getData()

    // 获取项目详情
    loadProjectDetail()
})

// 获取订单状态等常量
function getProjectConstant() {
    api_project_constant().then(res => {
        orderStatusList.value = res?.orderStatuses
        orderTypes.value = res?.orderTypes
        projectStatuses.value = res?.projectStatuses
    })
}

// 转换订单状态函数
const formatOrderStatus = (state) => {
    return orderStatusList.value.find(x => x.code == state).description
}

// 转换工单类型函数
const formatOrderType = (state) => {
    return orderTypes.value?.find(x => x.code == state).description
}

// 获取数据
function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }
    loading.value = true
    //项目id
    searchForm.projectId = projectId.value
    searchForm.page = currentPage.value
    api_orders_list(searchForm)
        .then(res => {
            // console.log('order list: ', res)
            tableData.value = res.records
            total.value = res.total
            currentPage.value = res.current
        })
        .finally(() => {
            loading.value = false
        })
}

// 查看项目详情
const loadProjectDetail = async () => {
    let projectInfo = await api_project_detail(projectId.value)
    //console.log("项目详情：", projectInfo)
    //项目详情
    resetForm_project(projectInfo.projectDto)

    //项目客户信息
    if (null != projectInfo.customerDto) {
        checkedCustomer_project.value = projectInfo.customerDto
        //console.log("项目客户信息: ", JSON.stringify(checkedCustomer_project.value))
    }
}

// 项目---------------------------------
// 修改项目
function updateProject() {
    formRef_project.value.validate((valid) => {
        if (!valid) return
        let reqBody = { ...form_project }
        //console.log('修改项目body: ', reqBody)
        api_project_update(projectId.value, reqBody)
            .then(res => {
                console.log('项目修改res: ', res)
                toast("项目信息修改成功")
            })
    })
}

// 重置项目表单
function resetForm_project(row = false) {
    if (row) {
        for (const key in form_project) {
            form_project[key] = row[key]
        }
    }
}

// 删除项目
function handleDelete_project() {
    api_project_delete(projectId.value).then(res => {
        toast("删除成功")
        emit('deleteProject')
    })
}

// 对外暴露的方法
const emit = defineEmits([
    'deleteProject',
])
// 项目---------------------------------

// 获取选择的客户
function getCheckedCompany(data) {
    console.log('checked customer: ', data)
    if (data != null) {
        form_project.customerId = data.id
        checkedCustomer_project.value = data
    }
}

// 工单---------------------------------
// 新增工单
const handleCreate = () => {
    activeNames.value = ["1", "4"]
    editId.value = 0
    resetForm({
        projectId: projectId.value,
        orderId: null,
        orderName: "",
        orderType: null,
        orderDescription: "",
        //工单客户信息与项目一致
        //customerId: checkedCustomer_project.value == null ? "" : checkedCustomer_project.value.id,
        //用于位置校验
        formattedAddress: null,
        locationCreateDto: {
            latitude: null,
            longitude: null,
            locationType: "1",
            formattedAddress: "",
            adcode: "",
            country: "",
            province: "",
            city: "",
            district: "",
            township: ""
        },
        //工单描述
        orderDescription: "",
        //开始时间
        startTime: null,
        //结束时间
        endTime: null,
        //服务地址
        serviceAddress: null,
        //联系方式
        //contactInfo: null,
        //船东
        shipownerName: null,
        shipownerContact: null,
        //船厂
        shipyardName: null,
        shipyardContact: null,
        //代理
        agentName: null,
        agentContact: null,
        //船舶信息
        shipIds: null,
        //设备信息
        devices: null,
        //服务要求
        serviceRequest: null
    })
    //默认工单金额0
    form.sum = 0
    //默认工单持续时间
    //form.continuous = 0

    //重置船厂、船东、代理人信息
    contacType1.value = false
    contacType2.value = false
    contacType3.value = false
    contacts.shipowner = [];
    contacts.shipyard = [];
    contacts.agent = [];

    //船舶信息置空
    tableDataShip.value = null
    //设备信息置空
    tableDataProduct.value = null

    //打开弹窗
    formDrawerRef.value.open()
}

// 编辑工单
const handleEdit = async (row) => {
    activeNames.value = ["1", "4"]
    //当前为编辑
    editId.value = row.orderId
    //根据id查询工单，获取地址信息进行回显
    let detail = await api_orders_detail(row.orderId)

    // console.log('row===>', JSON.stringify(row))
    //console.log('order detail===>', JSON.stringify(detail))

    //初始化联系方式展示框
    //船东
    if (null == row.shipownerName || "" == row.shipownerName) {
        contacType1.value = false
        contacts.shipowner = [];
    } else {
        contacType1.value = true
        const shipownerNames = row.shipownerName.split(';');
        const shipownerContacts = row.shipownerContact.split(';');
        contacts.shipowner = shipownerNames.map((name, index) => ({
            name: name.trim(),
            info: shipownerContacts[index] ? shipownerContacts[index].trim() : ''
        }));
    }
    if (null == row.shipyardName || "" == row.shipyardName) {
        contacType2.value = false
        contacts.shipyard = [];
    } else {
        contacType2.value = true
        const shipyardNames = row.shipyardName.split(';');
        const shipyardContacts = row.shipyardContact.split(';');
        contacts.shipyard = shipyardNames.map((name, index) => ({
            name: name.trim(),
            info: shipyardContacts[index] ? shipyardContacts[index].trim() : ''
        }));
    }
    //代理人
    if (null == row.agentName || "" == row.agentName) {
        contacType3.value = false
        contacts.agent = [];
    } else {
        contacType3.value = true
        const agentNames = row.agentName.split(';');
        const agentContacts = row.agentContact.split(';');
        contacts.agent = agentNames.map((name, index) => ({
            name: name.trim(),
            info: agentContacts[index] ? agentContacts[index].trim() : ''
        }));
    }

    //发布方式
    if (null != row.publishType) {
        row.publishType = row.publishType.toString();
    }

    resetForm(row)

    //回显地址信息------
    form.locationCreateDto = { ...detail.orderLocationDto }
    address.value = form.locationCreateDto.formattedAddress
    form.formattedAddress = form.locationCreateDto.formattedAddress
    //回显地址信息------

    //回显船舶信息------
    tableDataShip.value = detail.shipDtos
    //回显船舶信息------


    //回显产品信息
    tableDataProduct.value = detail.productInfoDtos

    //打开编辑弹窗
    formDrawerRef.value.open()
}

// 删除工单
const handleDelete = (id) => {
    loading.value = true
    api_orders_delete(id).then(res => {
        toast("删除成功")
        getData()
    })
        .finally(() => {
            loading.value = false
        })
}

// 重置工单表单
function resetForm(row = false) {
    if (formRef.value) formRef.value.resetFields()
    if (row) {
        for (const key in form) {
            form[key] = row[key]
        }
    }
}

// 提交工单表单
const handleSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) return
        //formDrawerRef.value.showLoading()
        //构建联系人参数
        //buildContacParam(form)
        //船舶信息
        //console.log(JSON.stringify(tableDataShip.value))
        if (null != tableDataShip.value && tableDataShip.value.length > 0) {
            let ids = null
            tableDataShip.value.forEach(function (element) {
                if (null == ids) {
                    ids = element.id.toString()
                } else {
                    ids = ids + "," + element.id.toString()
                }
            });
            form.shipIds = ids
        } else {
            form.shipIds = null
        }
        console.log(JSON.stringify(tableDataProduct.value))
        //设备信息
        if (null != tableDataProduct.value && tableDataProduct.value.length > 0) {
            let ids = null
            tableDataProduct.value.forEach(function (element) {
                if (null == ids) {
                    ids = element.productId.toString()
                } else {
                    ids = ids + "," + element.productId.toString()
                }
            });
            form.deviceIds = ids
        } else {
            form.deviceIds = null
        }
        //构建联系人参数
        form.shipownerName = contacts.shipowner.map(contact => contact.name).join(';');
        form.shipownerContact = contacts.shipowner.map(contact => contact.info).join(';');
        form.shipyardName = contacts.shipyard.map(contact => contact.name).join(';');
        form.shipyardContact = contacts.shipyard.map(contact => contact.info).join(';');
        form.agentName = contacts.agent.map(contact => contact.name).join(';');
        form.agentContact = contacts.agent.map(contact => contact.info).join(';');

        console.log(JSON.stringify(contacts.shipowner))
        console.log(JSON.stringify(contacts.shipyard))

        const fun = editId.value ? api_orders_update(editId.value, form) : api_orders_add(form)
        fun.then(res => {
            toast(drawerTitle.value + "成功")
            // 修改刷新当前页，新增刷新第一页
            getData(editId.value ? false : 1)
            formDrawerRef.value.close()
        }).finally(() => {
            formDrawerRef.value.hideLoading()
        })
    })
}
// 工单---------------------------------

// 工单指派工程师---------------------------------

const publishTypeChange = (val) => {
    // console.log("publishTypeChange==>",val)
    if (undefined == val || null == val) {
        publishForm.publishType = null
    }
    //清空已选工程师
    assignProps.assignedUserId = null
    assignProps.orderLocationDto = null
}

const getCheckedEngineer = (checkedEngineerIds) => {
    //console.log("getCheckedEngineer==>",checkedEngineerIds)
    assignProps.assignedUserId = checkedEngineerIds
}

// 提交指派工程师
const commitAssignEngineer = () => {
    //console.log("commitAssignEngineer===")
    if (null != assignProps.assignedUserId && assignProps.assignedUserId.length > 0) {
        asignEngineerDialogVisible.value = false;
    } else {
        toastWarn("您未选择工程师")
    }
}

// 关闭指派工程师
const closeAssignEngineer = () => {
    // 关闭地图
    asignEngineerDialogVisible.value = false;
}


// map
const getCheckedMapEngineer = (checkedEngineerIds) => {
    //console.log("getCheckedMapEngineer==>",checkedEngineerIds)
    assignProps.assignedUserId = checkedEngineerIds
}

// 提交指派工程师 map
const commitAssignMapEngineer = () => {
    if (null != assignProps.assignedUserId && assignProps.assignedUserId.length > 0) {
        asignEngineerMapDialogVisible.value = false;
    } else {
        toastWarn("您未选择工程师")
    }
}

// 关闭指派工程师 map
const closeAssignMapEngineer = () => {
    // 关闭地图
    asignEngineerMapDialogVisible.value = false;
}

// 工单指派工程师---------------------------------


// 工单表单数据项相关事件-----------------

function addTimestamp() {
    const regex = /^[^-]+-[^-]+$/;
    const currentDate = new Date().toISOString().split('T')[0].replace(/-/g, '');
    if (!form.orderName.includes(currentDate)) {
        form.orderName = `${form.orderName}-${currentDate}`;
    }
}
// 工单开始时间结束时间改变触发事件

function orderStartOrEndTimeChange() {
    if (form.startTime != null && form.endTime != null) {
        form.continuous = getDaysBetweenDates(form.startTime, form.endTime) + 1
    }
}

// 构建联系人参数
function buildContacParam(form) {

    let contacs = []

    if (null != contacTypeData1.contacPerson || null != contacTypeData1.contacPhone) {
        let c1 = {}
        c1.type = 1
        c1.contacPerson = contacTypeData1.contacPerson
        c1.contacPhone = contacTypeData1.contacPhone
        contacs.push(c1)
    }
    if (null != contacTypeData2.contacPerson || null != contacTypeData2.contacPhone) {
        let c2 = {}
        c2.type = 2
        c2.contacPerson = contacTypeData2.contacPerson
        c2.contacPhone = contacTypeData2.contacPhone
        contacs.push(c2)
    }
    if (null != contacTypeData3.contacPerson || null != contacTypeData3.contacPhone) {
        let c3 = {}
        c3.type = 3
        c3.contacPerson = contacTypeData3.contacPerson
        c3.contacPhone = contacTypeData3.contacPhone
        contacs.push(c3)
    }
    if (contacs.length > 0) {
        form.contactInfo = contacs
    }
}
// 工单表单数据项相关事件-----------------


// 工单操作按钮--------------------------
// 点击指派按钮
const handleAssign = (orderId) => {
    // console.log('点击指派 按钮')
    asignEngineerDialogVisible.value = true

    // api_orders_detail(orderId)
    // .then(res => {
    //     //console.log('order detail: ', res)
    //     assignProps.assignedUserId = res
    //     asignEngineerDialogVisible.value = true
    // }).catch(err => {
    //     console.log('查询订单详情错误：', err)
    // })
}

// 点击指派按钮 map
const handleMapAssign = (orderId) => {
    if (null == publishForm.formattedAddress) {
        toastWarn("请先选择工单位置")
        return
    }
    //传递工单位置参数
    assignProps.orderLocationDto = publishForm.locationCreateDto
    asignEngineerMapDialogVisible.value = true
}

// 点击评分按钮
const handleScore = async (row) => {
    //清空数据
    form_score.remark = ""
    form_score.labelMarks = []

    form_score.orderId = row.orderId
    // 查看之前评分
    let detail = await api_orders_getScore(row.orderId)
    if (detail) {
        for (const key in form_score) {
            form_score[key] = detail[key]
        }
        formDrawerRef_score.value.hideSubmitBtn()
        //已评价不可编辑
        form_score.isEdit = false
    } else {
        formDrawerRef_score.value.showSubmitBtn()
        let data = await api_orders_scoreLabels()
        form_score.labelMarks = data.map(x => {
            return { labelId: x.id, mark: 5, labelName: x.value }
        })
        //未评价可编辑
        form_score.isEdit = true
    }
    formDrawerRef_score.value.open()
}

// 点击查看客户评分
const customerScore = async (row) => {
    // 清空数据
    form_customerScore.remark = "";
    form_customerScore.labelMarks = [];
    form_purchaseScore.remark = "";
    form_purchaseScore.labelMarks = [];
    form_customerScore.orderId = row.orderId;
    form_purchaseScore.orderId = row.orderId;

    // 查看之前评分
    const [detail, purchase] = await Promise.all([
        api_orders_getCustomerScore(row.orderId, 0),
        api_orders_getCustomerScore(row.orderId, 2)
    ]);

    if (detail) {
        Object.assign(form_customerScore, detail);
    }
    if (purchase) {
        Object.assign(form_purchaseScore, purchase);
    }

    formDrawerRef_customerScore.value.open();

}

// 点击发布按钮
const showPublishWin = async (row) => {
    //置空数据------
    publishForm.formattedAddress = null
    publishForm.locationCreateDto = {
        latitude: null,
        longitude: null,
        locationType: "1",
        formattedAddress: "",
        adcode: "",
        country: "",
        province: "",
        city: "",
        district: "",
        township: ""
    }
    //发布方式
    publishForm.publishType = "1"
    //选择的工程师ids
    publishForm.engineerIds = null
    //已选择的工程师
    assignProps.assignedUserId = null
    //置空数据------

    //赋值工单id
    publishForm.orderId = row.orderId
    //工单详情
    let detail = await api_orders_detail(row.orderId)

    //回显地址信息------
    publishForm.locationCreateDto = { ...detail.orderLocationDto }
    publishForm.formattedAddress = publishForm.locationCreateDto.formattedAddress
    //回显地址信息------

    //回显发布方式、已选工作人员
    if (null != detail.orderDto.publishType) {
        publishForm.publishType = detail.orderDto.publishType.toString()
    }
    //发布方式，1指派，2地图选择，3所有人抢单，4指定人抢单
    //工单状态（1:未派发, 2:已派发,3工程师已接单，4工程师已出发，5:已开始,6施工已结束，7:已回款, 8:工单已完结）
    // console.log(JSON.stringify(detail.orderDto.publishType))
    // console.log(JSON.stringify(detail.orderDto.orderStatus))
    if (detail.orderDto.publishType == 4 && detail.orderDto.orderStatus < 3) {
        if (null != detail.orderDto.preEngineerIds) {
            let ids = detail.orderDto.preEngineerIds
            assignProps.assignedUserId = ids.split(',')
        }
    } else {
        if (null != detail.orderDto.engineerIds) {
            let ids = detail.orderDto.engineerIds
            assignProps.assignedUserId = ids.split(',')
        }
    }
    //回显发布方式、已选工作人员

    dialogTableVisible_orderPublish.value = true
}

// 发布工单
const orderPublish = () => {
    publishFormRef.value.validate((valid) => {
        if (!valid) return

        //先清空已选工程师ids
        publishForm.engineerIds = null

        //0 地图选择 1 由指派人选择执行人员 2 所有人抢单 3 指定人抢单
        //发布方式，1指派，2地图选择，3所有人抢单，4指定人抢单
        if (publishForm.publishType == 1 || publishForm.publishType == 4) {
            if (null != assignProps.assignedUserId && assignProps.assignedUserId.length > 0) {
                //选择工程师
                publishForm.engineerIds = assignProps.assignedUserId
            } else {
                toastWarn("请选择工程师")
                return
            }
        }

        // console.log(JSON.stringify(publishForm))

        const fun = api_orders_dispatch(publishForm)
        fun.then(res => {
            toast("发布成功")
            dialogTableVisible_orderPublish.value = false
            //刷新工单列表
            getData()
        })
    })
}


// 点击日志按钮
const handleOrderLog = (row) => {
    currOrderLog_orderDetail.value = row
    dialogTableVisible_orderLog.value = true
}

// 打开工单附件弹窗
const showFiles = (row) => {
    dialogTable_orderFiles_title.value = "工单附件"
    dialogTable_orderFiles_type.value = 0
    currOrderFiles_orderId.value = row.orderId
    dialogTableVisible_orderFiles.value = true
}

// 打开施工档案弹窗
const showFilesEn = (row) => {
    dialogTable_orderFiles_title.value = "施工档案"
    dialogTable_orderFiles_type.value = 1
    currOrderFiles_orderId.value = row.orderId
    dialogTableVisible_orderFiles.value = true
}

// 确认已回款
const handleOrderPayment = (orderId) => {
    let form = {}
    form.orderId = orderId
    //1:未派发, 2:已派发,3工程师已接单，4工程师已出发，5:已开始,6施工已结束，7:已回款, 8:工单已完结
    form.orderStatus = 7
    const fun = api_orders_update(orderId, form)
    fun.then(res => {
        toast("操作成功")
        getData(false)
    })
}

// 确认结单
const handleOrderOver = (orderId) => {
    let form = {}
    form.orderId = orderId
    //1:未派发, 2:已派发,3工程师已接单，4工程师已出发，5:已开始,6施工已结束，7:已回款, 8:工单已完结
    form.orderStatus = 8
    const fun = api_orders_update(orderId, form)
    fun.then(res => {
        toast("操作成功")
        getData(false)
    })
}

// 提交评价
const handleSubmit_score = () => {
    console.log(form_score)
    api_orders_postScore(form_score)
        .then(res => {
            toast('评价成功')
            formDrawerRef_score.value.close()
        })
        .catch(res => {
            // toastError('评价失败：' + res)
        })
}
// 工单操作按钮--------------------------

//船舶信息---------------------------------
function selectShip() {
    dialogTableVisible_ship.value = true
}

//打开新增船舶窗口
function showAddShipWin() {
    //清空校验
    if (shipFormRef.value) shipFormRef.value.resetFields()
    //数据置空
    shipForm.name = null
    shipForm.imo = null
    shipForm.mmsi = null
    shipForm.flagCountry = null
    shipForm.classificationSociety = null
    shipForm.shipownerCompany = null
    shipForm.shipmanagementCompany = null
    //打开弹窗
    shipFormDrawerRef.value.open()
}

//回显船舶
function getCheckedShip(val) {
    //console.log("回显数据===>",JSON.stringify(val))
    dialogTableVisible_selectShipCheckList.value = val
}

//确认已选择的船舶
function confirmCheckedShip() {
    //去重回显
    if (null != dialogTableVisible_selectShipCheckList.value && dialogTableVisible_selectShipCheckList.value.length > 0) {
        if (null == tableDataShip.value || tableDataShip.value.length == 0) {
            tableDataShip.value = dialogTableVisible_selectShipCheckList.value
        } else {
            tableDataShip.value = delRepeatJson(tableDataShip.value.concat(dialogTableVisible_selectShipCheckList.value), "id")
        }
        dialogTableVisible_ship.value = false
    } else {
        toastWarn("您未选择船舶")
    }
}

//移除已选船舶
function deleteShip(id) {
    console.log(id)
    tableDataShip.value = tableDataShip.value.filter(o => o.id != id);
}

const shipRules = {
    name: [
        { required: true, message: '船舶名称不能为空', trigger: 'change' }
    ]
}

const shipHandleSubmit = () => {
    //表单校验
    shipFormRef.value.validate((valid) => {
        if (!valid) return
        //loading
        shipFormDrawerRef.value.showLoading()
        const fun = addShip(shipForm)
        fun.then(res => {
            toast("新增成功")
            //数据合并回显
            //console.log(JSON.stringify(res))
            if (null == tableDataShip.value || tableDataShip.value.length == 0) {
                tableDataShip.value = [res]
            } else {
                tableDataShip.value = delRepeatJson(tableDataShip.value.concat([res]), "id")
            }
            shipFormDrawerRef.value.close()
        }).finally(() => {
            //close loading
            shipFormDrawerRef.value.hideLoading()
        })
    })
}
//船舶信息---------------------------------

//设备信息---------------------------------
// 定义产品分类数据
const factoryTypes = ref([
    { value: 'HLD', label: 'HLD' },
    { value: 'WG', label: 'WG' },
    { value: 'OEM', label: 'OEM' }
]);

const transferProductStatus = (status) => {
    switch (status) {
        case 0:
            return '保内';
        case 1:
            return '保外';
        default:
            return status;
    }
};
function selectDevice() {
    dialogTableVisible_device.value = true
}

//打开新增船舶窗口
function showAddDeviceWin() {
    //加载设备类型字典
    initDeviceType()
    //清空校验
    if (deviceFormRef.value) deviceFormRef.value.resetFields()
    //数据置空
    deviceForm.factory = null
    deviceForm.productTypeCode = null
    deviceForm.productSn = null
    deviceForm.oeSerialNo = null
    deviceForm.softwareVersion = null
    deviceForm.customerId = null
    deviceForm.supplierId = null
    deviceForm.warrantyTerms = null
    deviceForm.deliveryDate = null
    deviceForm.completionDate = null
    deviceForm.shipDeliveryDate = null
    deviceForm.warrantyEndDate = null
    //打开弹窗
    deviceFormDrawerRef.value.open()
}

//回显设备
function getCheckedDevice(val) {
    // console.log("回显数据===>",JSON.stringify(val))
    dialogTableVisible_selectDeviceCheckList.value = val
}

//确认已选择的设备
function confirmCheckedDevice() {
    //去重回显
    if (null != dialogTableVisible_selectDeviceCheckList.value && dialogTableVisible_selectDeviceCheckList.value.length > 0) {
        if (null == tableDataProduct.value || tableDataProduct.value.length == 0) {
            tableDataProduct.value = dialogTableVisible_selectDeviceCheckList.value
        } else {
            tableDataProduct.value = delRepeatJson(tableDataProduct.value.concat(dialogTableVisible_selectDeviceCheckList.value), "productId")

        }
        dialogTableVisible_device.value = false
    } else {
        toastWarn("您未选择设备")
    }
}

//移除已选设备
function deleteDevice(productId) {
    console.log(productId)
    tableDataProduct.value = tableDataProduct.value.filter(o => o.productId != productId);
}

//初始化设备类型
function initDeviceType() {
    //查询全部
    let paramIo = {
        page: 1,
        size: 100,
    }
    getProductTypeList(paramIo).then(res => {
        if (res) {
            deviceTypeDic.value = res.records
        } else {
            toastWarn("获取设备类型字典数据失败")
        }
    })
}

const deviceRules = {
    deviceTypeId: [
        { required: true, message: '产品类型不能为空', trigger: 'change' }
    ],
    deviceCode: [
        { required: true, message: '产品序列号不能为空', trigger: 'change' }
    ],
}

//选择供货商
function getCheckedCompanyForDevice(data) {
    // console.log('checked customer: ', JSON.stringify(data))
    if (data != null) {
        deviceForm.customerId = data.id
        deviceCheckedCompany.value = data
    }
}

//选择终端客户
function getCheckedSupplierForDevice(data) {
    // console.log('checked customer: ', JSON.stringify(data))
    if (data != null) {
        deviceForm.supplierId = data.id
        deviceCheckedSupplier.value = data
    }
}

const deviceHandleSubmit = () => {
    //表单校验
    deviceFormRef.value.validate((valid) => {
        if (!valid) return
        //loading
        deviceFormDrawerRef.value.showLoading()
        const fun = addProductAndType(deviceForm)
        fun.then(res => {
            toast("新增成功")
            //数据合并回显
            //console.log(JSON.stringify(res))
            if (null == tableDataProduct.value || tableDataProduct.value.length == 0) {
                tableDataProduct.value = [res]
            } else {
                tableDataProduct.value = delRepeatJson(tableDataProduct.value.concat([res]), "productId")
            }
            deviceFormDrawerRef.value.close()
        }).finally(() => {
            //close loading
            deviceFormDrawerRef.value.hideLoading()
        })
    })
}

//设备信息---------------------------------

</script>

<style lang="scss">
// .el-divider__text {
//     font-size: 15px;
//     color: #00000042;
// }
.el-collapse-item__header:focus,
.el-collapse-item__header:hover {
    outline: none;
    box-shadow: none;
}

button:hover {
    border-color: #646cff;
}

.iconStyle {
    width: 18px;
    font-size: large;
}

.inputStyle {
    width: 213px;
    margin-right: 20px;
}

.no-data {
    text-align: center;
}
</style>